<template>
  <div>
    <!-- 搜索 -->
    <!-- 预授权级别维护 -->
    <TopFilter ref="topFilter" :list="topFilterInit" :cols="2" :collapse="collapse" labelWidth="90" @filterChange="changeHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :fetchapi="fetchapi"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      selectionType="single"
    >
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <AjaxButton type="primary" :click="sureDialog">确定</AjaxButton>
      <el-button @click="closeDialog">关 闭</el-button>
    </div>
  </div>
</template>

<script>
  import { findPartClaim } from '@/api/claim/dealer/AuthMaintenance';
  import addRescuePanel from './addRescuePanel.vue';
  export default {
    name: "index",
    components: {
      addRescuePanel,
    },
    data() {
      return {
        topFilterInit: this.topFilterInitFun(),
        fetchParams: {querFlag:1,xhrAbort: false}, //ipa 接口
        columns: this.creatHeader(),
        selectedRows: [], //选中
        collapse: true,
        fetchapi: findPartClaim,
        visibleEdit: false,
        rowData: {},
        dialogTitle: '',
        type:''
      }
    },
    created() {},
    methods: {
      //搜索数据
      topFilterInitFun() {
        return [
          {type: 'INPUT', label: '备件代码', fieldName: 'partNo', placeholder: '请输入...', initialValue: '' },
          {type: 'INPUT', label: '备件名称', fieldName: 'partName', placeholder: '请输入...', initialValue: '' }
        ];
      },
      //搜索获取数据
      changeHandle(val) {
        this.fetchParams = Object.assign({querFlag:1}, this.fetchParams, val,{xhrAbort: false});
      },
      //table表头和数据源
      creatHeader() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            fixed: 'left',
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          { title: '备件代码', dataIndex: 'partNo', sorter: true },
          { title: '备件名称', dataIndex: 'partName', sorter: true },
          { title: '单位', dataIndex: 'unit', sorter: true },
        ];
      },
      //选中行
      selectChange(rows) {
        this.selectedRows = rows;
        console.log(this.selectedRows);
      },
      //取消操作
      closeDialog() {
        this.$emit('close', false);
      },
      sureDialog() {
        this.$emit('save', this.selectedRows);
      },
    }
  }
</script>

<style scoped>

</style>
